<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ngAria/aria.js?message=docs(ngAria)%3A%20describe%20your%20change...#L3' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>


<h1>
  <code>ngAria</code>
</h1>

<p>The <code>ngAria</code> module provides support for adding <abbr title="Accessible Rich Internet Applications">ARIA</abbr>
attributes that convey state or semantic information about the application in order to allow assistive technologies
to convey appropriate information to persons with disabilities.</p>
<div doc-module-components="ngAria"></div>

<h1 id="usage">Usage</h1>
<p>To enable the addition of the ARIA tags, just require the module into your application and the tags will
hook into your ng-show/ng-hide, input, textarea, button, select and ng-required directives and adds the
appropriate ARIA attributes.</p>
<p>Currently, the following ARIA attributes are implemented:</p>
<ul>
<li>aria-hidden</li>
<li>aria-checked</li>
<li>aria-disabled</li>
<li>aria-required</li>
<li>aria-invalid</li>
<li>aria-multiline</li>
<li>aria-valuenow</li>
<li>aria-valuemin</li>
<li>aria-valuemax</li>
<li>tabindex</li>
</ul>
<p>You can disable individual ARIA attributes by using the <a href="api/ngAria/provider/$ariaProvider#config">config</a> method.</p>



  <h2>Installation</h2>

  <p>First include <code>angular-aria.js</code> in your HTML:</p>

  <pre><code>    &lt;script src=&quot;angular.js&quot;&gt;&#10;    &lt;script src=&quot;angular-aria.js&quot;&gt;</code></pre>

  <p>You can download this file from the following places:</p>
  <ul>
    <li>
      <a href="https://developers.google.com/speed/libraries/devguide#angularjs">Google CDN</a><br>
      e.g. <code>//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-aria.js</code>
    </li>
    <li>
      <a href="http://bower.io">Bower</a><br>
      e.g. <pre><code>bower install angular-aria@X.Y.Z</code></pre>
    </li>
    <li>
      <a href="http://code.angularjs.org/">code.angularjs.org</a><br>
      e.g. <pre><code>&quot;//code.angularjs.org/X.Y.Z/angular-aria.js&quot;</code></pre>
    </li>
  </ul>
  <p>where X.Y.Z is the AngularJS version you are running.</p>
  <p>Then load the module in your application by adding it as a dependent module:</p>
  <pre><code>  angular.module(&#39;app&#39;, [&#39;ngAria&#39;]);</code></pre>

  <p>With that you&apos;re ready to get started!</p>


<div class="component-breakdown">
  <h2>Module Components</h2>
  
  <div>
    <h3 class="component-heading" id="provider">Provider</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngAria/provider/$ariaProvider">$ariaProvider</a></td>
        <td><p>Used for configuring ARIA attributes.</p>
</td>
      </tr>
      
    </table>
  </div>
  
  <div>
    <h3 class="component-heading" id="service">Service</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngAria/service/$aria">$aria</a></td>
        <td><p>Contains helper methods for applying ARIA attributes to HTML</p>
</td>
      </tr>
      
    </table>
  </div>
  
</div>




